{% extends base/base2.html %}

{% block body_top %}

    {% include note/component/view_css.html %}

    <div class="card">
        <div class="grid-title">
            <span>{{title}}</span>
            <div class="float-right">
                <a class="btn" href="javascript:createGroup();">新建笔记本</a>
                <a class="btn btn-default" href="/note/tools?category=note">工具</a>
            </div>
        </div>

        {% include note/script/create_script.html %}
    </div>
{% end %}


{% block body_left %}
    <link rel="stylesheet" type="text/css" href="/static/css/base/common-button.css">
    <link rel="stylesheet" type="text/css" href="/static/css/base/common-layout.css">

    <div class="card">
        <div class="pad5">
            <div class="x-tab-box" data-tab-default="active" data-tab-key="status">
                <a class="tab tab-link x-tab x-tab-default" href="/note/group?status=active" data-tab-value="active">
                    活跃(<span class="task-count">{{active_count}}</span>)
                </a>
                <a class="tab tab-link x-tab" href="/note/group?status=archived" data-tab-value="archived">
                    归档(<span class="task-count">{{archived_count}}</span>)
                </a>
            </div>
        </div>
    </div>

    {% if status == "active" %}
        <div class="mobile-only">
            {% include note/component/group_special_folder.html %}
        </div>
    {% end %}

    <div class="card group-list-box">
        {% if len(groups) == 0 %}
            {% include common/text/empty_text.html %}
        {% end %}

        {% for item in groups %}
            <a class="list-link" href="{{item.url}}">
                
                {% if item.priority>0 %}
                    <i class="fa fa-thumb-tack black"></i>
                {% end %}

                <!-- 图标和标题 -->
                <i class="fa {{item.icon}} fa-{{item.icon}} black"></i>                
                <span>{{item.name}}</span>
                <div class="float-right">
                    <span class="book-size-span">{{item.size}}</span>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        {% end %}
    </div>
{% end %}

{% block body_right %}
    <div class="desktop-only">
        {% include note/component/group_special_folder.html %}
        {% include note/card/note_types.html %}
    </div>
{% end %}

